<template>
  <div class="yeji-login">
    <div class="yeji-login-main">
      <h1>Hello , Welcome HRY !</h1>
      <div class="yeji-login-title">
        <img src="@/assets/imgAdmin/loginLogo.png" alt="" />
        <p>后台管理中心</p>
      </div>
      <div class="login">
        <a-form
          class="ant-advanced-search-form"
          :form="form"
          @submit="handleSubmit"
        >
          <a-form-item>
            <a-input
              size="large"
              v-decorator="[
                'mobile',
                { rules: [{ required: true, message: '请输入用户名！' }] }
              ]"
              placeholder="请输入用户名"
            >
              <i
                slot="prefix"
                class="iconfont icon-icon-user"
                style="color: #727272;"
              ></i>
            </a-input>
          </a-form-item>
          <a-form-item>
            <a-input
              size="large"
              type="password"
              v-decorator="[
                'password',
                { rules: [{ required: true, message: '请输入密码！' }] }
              ]"
              placeholder="请输入密码"
            >
              <i
                slot="prefix"
                class="iconfont icon-mima"
                style="color: #727272;"
              ></i>
            </a-input>
          </a-form-item>
          <a-row>
            <a-col :span="24" :style="{ textAlign: 'center' }">
              <a-button
                style="width: 100%;border-radius: 8px;"
                size="large"
                type="primary"
                html-type="submit"
              >
                登录
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      form: this.$form.createForm(this),
      imgSrc: ""
    };
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        if (!error) {
          this.$ajax
            .post(this.$api.login, values)
            .then(res => {
              this.$notification.success({
                message: "登录成功！"
              });
              localStorage.setItem("token", this.$crypto.setAES(res.token));
              this.$store.dispatch("changeLoginState", true);
              this.$store.dispatch("changeName", res.username);
              this.$router.push({ name: "home" });
            })
            .catch(err => {
              this.$notification.error({
                message: err
              });
            });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped lang="less">
.yeji-login {
  width: 100%;
  height: 100%;
  background: url("@{images}/imgAdmin/loginBg.png") no-repeat;
  background-size: 100% 52%;
}
.yeji-login-main {
  text-align: center;
  padding-top: 180px;
}
.yeji-login-main > h1 {
  font-size: 60px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #eeeeee;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  margin-bottom: 90px;
}
.yeji-login-title {
  display: flex;
  justify-content: center;
  align-items: center;
}
.yeji-login-title > img {
  width: 163px;
  margin-right: 11px;
}
.yeji-login-title > p {
  font-size: 36px;
  color: #ffffff;
  opacity: 0.77;
}
.login {
  margin: 22px auto 0;
  width: 510px;
  padding: 52px 48px 45px;
  background: rgba(255, 255, 255, 0.35);
  box-shadow: 0px 3px 8px 0px rgba(30, 111, 72, 0.35);
  border-radius: 10px;
}
.loginCodeImg {
  width: 122px;
  height: 40px;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  margin-left: 14px;
}
.loginCodeImg > img {
  display: block;
  width: 122px;
  border-radius: 8px;
  height: 40px;
}
.ant-advanced-search-form {
  text-align: left;
}
</style>
